<template>
<div>
<div class="my_inf" v-if="JSON.stringify(teacherInf) !== '{}'">
    <div class="inf_left">
      <div class="inf_photo">
        <img src="../../assets/img/logo.png" alt="" />
        <span>{{ teacherInf.t_name }}</span>
      </div>
      <ul class="clear">
        <li>
          部门：<span>{{ teacherInf.t_department }}</span>
        </li>
        <li>
          工号：<span>{{ teacherInf.t_schoolId }}</span>
        </li>
        <li>
          职务：<span>{{ teacherInf.t_post }}</span>
        </li>
        <li>
          地址：<span>{{ teacherInf.t_site }}</span>
        </li>
        <li>
          电话：<span>{{ teacherInf.t_phone }}</span>
        </li>
        <li>
          邮箱：<span>{{ teacherInf.t_eMail }}</span>
        </li>
      </ul>
      <div class="inf_btn">
        <el-button
          size="small"
          type="primary"
          @click="openLeaveWord(teacherInf.t_id)"
          round
          >发留言</el-button
        >
      </div>
    </div>
    <div class="inf_right">
      <div>
        <h3>荣誉记录</h3>
        <ul class="awards_list">
          <li v-for="infor in awards" :key="infor.a_id">
            <h4>{{ infor.a_title }}</h4>
            <span>{{ infor.a_time }}</span>
          </li>
        </ul>
      </div>
      <div>
        <h3>指导项目</h3>
        <el-collapse>
          <el-collapse-item
            v-for="(data, i) in project"
            :key="data.id"
            :title="data.p_title"
            :name="i"
          >
            <div>
              {{ data.p_synopsis }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <el-dialog title="写留言" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="留言">
          <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelWriteLeaveWord">取 消</el-button>
        <el-button type="primary" @click="writeLeaveWord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <div class="null" v-if="JSON.stringify(teacherInf) === '{}'">暂无导师</div>
</div>
  
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      teacherInf: {},
      awards: [],
      project: [],
      dialogFormVisible: false,
      leaveWordTo: -1,
      form: {
        leaveWord: "",
      },
    };
  },
  name: "MyInf",
  mounted() {
    this.getTeaceherData();
  },
  methods: {
    getTeaceherData() {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post(`http://localhost:3000/student/teacherMes`, {
          s_id,
        })
        .then((ret) => {
          this.project = ret.data.teacherMes.project;
          this.teacherInf = ret.data.teacherMes.mes;
          this.awards = ret.data.teacherMes.awards;
        });
    },
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openLeaveWord(id) {
      this.dialogFormVisible = true;
      this.leaveWordTo = id;
    },
    writeLeaveWord() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "留言不能为空！！",
          type: "error",
        });
      } else {
        var token = localStorage.getItem("token");
        var u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
        var w_time = new Date().toLocaleString();
        axios
          .post(`http://localhost:3000/student/writeLeaveWord`, {
            u_id,
            w_main: this.form.leaveWord,
            w_time,
            w_type: 5,
            w_to: this.leaveWordTo,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "留言成功",
                type: "success",
              });
              this.cancelWriteLeaveWord();
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.my_inf {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
}
.inf_left {
  width: 300px;
  height: 700px;
  position: sticky;
  top: 10px;
  padding: 0px 10px;
}
.inf_left,
.inf_right > div {
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.inf_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  font-size: 18px;
  font-weight: 700;
  color: #303133;
}
.inf_photo > img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ddd;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.inf_left > ul {
  border-top: 2px solid #606266;
  margin-bottom: 200px;
}
.inf_left > ul > li {
  font-size: 16px;
  color: #606266;
  margin: 20px 10px;
}
.inf_btn {
  margin: 20px 10px;
}
.inf_right {
  width: 70%;
}
.inf_right > div {
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px 20px;
}
.inf_right > div > h3 {
  width: 100px;
  height: 40px;
  font: 18px/40px "";
  font-weight: 700;
  color: #303133;
  text-align: center;
  border-bottom: 2px solid #606266;
}
.awards_list {
  display: flex;
  flex-wrap: wrap;
}
.awards_list li {
  width: 35%;
  margin: 20px;
  padding: 10px;
  color: white;
  background-color: #409eff;
  border-radius: 20px;
}
.team_card {
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
  color: white;
  background-color: #409eff;
}
.team_card img {
  background-color: #fff;
}
.team_card > h4 {
  height: 24px;
  font-weight: 700;
  font: 18px/24px "";
}
.team_card > div {
  margin-top: 5px;
  height: 60px;
  display: flex;
  align-items: center;
}
.team_card > div > span {
  font-size: 18px;
  display: inline-block;
}
.team_card > div > div {
  display: inline-block;
  margin: 0 20px;
}
img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
</style>
